<template>
  <u-number-box v-bind="$attrs" v-model="value" @change="$emit('change', $event)">
    <template #minus>
      <view v-if="(isHiddenMinus && value !== 0) || !isHiddenMinus" class="minusIcon flex-row items-center justify-center">
        <image class="numbox-img" src="https://zxtest001.oss-cn-beijing.aliyuncs.com/l-owner-uni3/icon_num_minus.png"></image>
      </view>
    </template>
    <template #input>
      <view v-if="(isHiddenMinus && value !== 0) || !isHiddenMinus" class="u-padding-10 num" @click="handleEdit">
        <input v-model="value" class="box-input" type="number" @change="inputChange" />
        {{ props.unit }}
      </view>
    </template>
    <template #plus>
      <image class="numbox-img" src="https://zxtest001.oss-cn-beijing.aliyuncs.com/l-owner-uni3/icon_num_plus.png"></image>
    </template>
  </u-number-box>
</template>

<script setup lang="ts">
import { watch, ref, useAttrs } from 'vue';
import _ from 'lodash';
const emit = defineEmits(['change']);
const attrs = useAttrs();
const modalValue: any = reactive({
  edit: false,
});
const props = defineProps({
  count: { type: Number, default: 0 },
  unit: { type: String, default: '' },
  isHiddenMinus: { type: Boolean, default: false }, // 当计算数值为0 时候是否隐藏左侧减号按钮和数字显示
});
const value = ref<number>(0);
watch(
  () => props.count,
  (val) => {
    value.value = props.count || 0;
  },
  { immediate: true }
);
const debounceUpdate = _.debounce((val: any) => {
  value.value = val.value *1;
}, 500);
function inputChange(e: any) {
  value.value = e.detail.value *1;

  emit('change', {value: e.detail.value, name: attrs.name});

}
</script>

<style lang="scss" scoped>
::v-deep .u-number-box > view {
  width: 48rpx;
  height: 48rpx;
  // view{
  //   width: 48rpx;
  //   height: 48rpx;
  // }
}
.minusIcon {
  color: red;
}
.numbox-img {
  width: 48rpx;
  height: 48rpx;
}
.num {
  font-weight: 500;
  font-size: 26rpx;

  color: #1b1a1d;
  line-height: 36rpx;
  width: fit-content;
  display: flex;
  justify-content: center;
  align-items: center;
}
.inputmodal {
  width: 100%;
  margin-top: 24rpx;
  margin-bottom: 24rpx;
}
.box-input {
  text-align: center;
  flex-shrink: 1;
  margin-right: 4rpx;
  width: 60rpx;
}
</style>
